// 导入 React，用来创建 react 元素的
import React from 'react';
// 导入对应渲染平台库
import ReactDOM from 'react-dom/client';

// 渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// JSX 中使用 JS 数据
const name = 'Jack';
const age = 18;
const likes = ['吃饭', '睡觉', '敲代码'];
const obj = {
  name: 'Rose',
  age: 18,
};
let loading = false;
const fn = () => {
  console.log('fnfnfn');
  return '服务器返回的数据';
};
const jsx = <h1>wahaha</h1>;

const url =
  'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';

const el = (
  <div>
    <h1 onClick={fn}>我是：{name}</h1>
    <h1 onClick={fn}>今年：{age}岁</h1>
    <h1 onClick={fn}>爱好：{likes.join('=>')}</h1>
    <h1 onClick={fn}>
      对象：{obj.name}, {obj.age}
    </h1>
    <h1>{loading ? '加载中...' : '加载完毕'}</h1>
    <h1>{fn()}</h1>
    <div>{jsx}</div>
    <img src={url} alt="我是头像"></img>
    {/* 这里是注释 */}
  </div>
);

// 渲染到页面上
root.render(el);
